.ew-switch {
  position: relative;
  cursor: pointer;
  min-width: 80px;
  padding: 5px;
  color: #535355;
  display: inline-block;
  font-size: 14px;
}
.ew-switch-inner {
  display: inline-block;
  vertical-align: middle;
  width: 44px;
  height: 22px;
  background-color: #c3c3c4;
  border-radius: 25px;
  cursor: pointer;
  margin-right: 8px;
  position: relative;
}
.ew-switch-inner::after {
  content: "";
  width: 18px;
  height: 18px;
  background-color: #f2f1f3;
  position: absolute;
  top: 2px;
  left: 2px;
  cursor: pointer;
  border-radius: 50%;
  animation-timing-function: linear;
  animation-duration: 0.4s;
  animation-fill-mode: forwards;
  animation-name: slideOff;
}
.ew-switch.active .ew-switch-inner {
  background-color: #2396ef;
}
.ew-switch.active .ew-switch-inner::after {
  animation-name: slideOn;
}
.ew-switch.disabled {
  cursor: not-allowed;
}
.ew-switch.disabled .ew-switch-inner {
  cursor: not-allowed;
}
.ew-switch.disabled .ew-switch-inner::after {
  background-color: #909092;
}
@keyframes slideOn {
  0% {
    transform: translateX(0) scale(1);
  }
  50% {
    transform: translateX(12px) scale(1.2);
  }
  100% {
    transform: translateX(22px) scale(1);
  }
}
@keyframes slideOff {
  0% {
    transform: translateX(22px) scale(1);
  }
  50% {
    transform: translateX(12px) scale(1.2);
  }
  100% {
    transform: translateX(0) scale(1);
  }
}
